<template>
    <div ref="chartRef" :style="{ height, width }"></div>
  </template>
  <script lang="ts">
    import { defineComponent, PropType, ref, Ref, reactive, watchEffect, nextTick  } from 'vue';
    import { useECharts } from '@/hooks/useECharts';
    import { MarkLineComponent } from 'echarts/components';
    import { cloneDeep } from 'lodash-es';
    
    export default defineComponent({
      name: 'bar',
      props: {
        chartData: {
          type: Array,
          default: () => [],
        },
        option: {
          type: Object,
          default: () => ({}),
        },
        gb: {
          type: String as PropType<string>,
        },
        ub: {
          type: String as PropType<string>,
        },
        unit: {
          type: String as PropType<string>,
        },
        width: {
          type: String as PropType<string>,
          default: '100%',
        },
        height: {
          type: String as PropType<string>,
          default: 'calc(100vh - 78px)',
        },
      },
      setup(props) {
        const chartRef = ref<HTMLDivElement | null>(null);
        const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
        echarts.use([MarkLineComponent]);
        let fontSize = 22
        const windowWidth = window.innerWidth;
        if (windowWidth <= 1024) {
          fontSize = 14
        }
        else if (windowWidth <= 1180) {
          fontSize = 15
        }
        else if (windowWidth <= 1366) {
          fontSize = 16
        }
        else if (windowWidth <= 1500) {
          fontSize = 18
        }
        else if (windowWidth <= 1900) {
          fontSize = 20
        }
        else if (windowWidth <= 2400) {
          fontSize = 22
        }
        else{
          fontSize = 22
        }

        const option = reactive({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true,
                backgroundColor: '#333',
              },
            },
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value'
          },
          series: [
          {
              name:'',
              type: 'bar',
              data: [],
              markLine: {
                symbol:  ['none'], // 不显示箭头或标记
                silent: true,
                lineStyle: {
                    type: 'solid',
                    width: 3
                },
                data: [
                    {
                        name: '国家标准（National Standard）' + props.gb + props.unit,
                        yAxis: Number(props.gb), // 上限值
                        label: {
                          show: props.gb ? true : false,
                          fontSize: fontSize,//可控
                          formatter: '{b}', // 显示 name
                          position: 'middle', // 标签位置
                          color: "#FFFFFF" //可控
                        },
                        lineStyle: {
                            color: 'red', // 上限线颜色
                            opacity: props.gb ? 1 : 0
                        }
                    },
                    {
                        name: '欧盟标准（EU Standard）' + props.ub + props.unit,
                        yAxis: Number(props.ub), // 下限值
                        label: {
                          show: props.ub ? true : false,
                          fontSize: fontSize, //可控
                          formatter: '{b}', // 显示 name
                          position: 'middle', // 标签位置
                          color: "#FFFFFF" //可控
                        },
                        lineStyle: {
                            color: '#67C23A', // 下限线颜色
                            opacity: props.ub ? 1 : 0
                        }
                    }
                ]
              }
          }],
        });
  
        watchEffect(async () => {
            props.chartData && initCharts();
        });
  
        function initCharts() {
          if (props.option) {
            Object.assign(option, cloneDeep(props.option));
          }
          let legendName = ''
          if (props.chartData[0]?.type){
            legendName = props.chartData[0].type
          }
          let seriesData = props.chartData.map((item) => {
            return item.value;
          });
          let xAxisData = props.chartData.map((item) => {
            return item.name;
          });
          option.series[0].data = seriesData;
          option.series[0].name = legendName
          option.xAxis.data = xAxisData;
          setOptions(option, true);
        }
        return { chartRef };
      },
    });
  </script>
  